<template>
  <div class="addLabel">
    <el-popover
      placement="bottom"
      width="400"
      ref="addLabel"
      trigger="manual"
      v-model="visible"
    >
      <div v-if="customerLabelShow">
        <el-select
          v-model="customerLabel"
          value-key="_id"
          multiple
          style="width: 300px; margin-right: 6px"
        >
          <el-option
            v-for="item in labelData"
            :key="item._id"
            :value="{
              _id: item._id,
              name: item.name,
              color: item.color,
            }"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="saveCustomerLabel">保存</el-button>
      </div>
      <div v-else>
        <el-cascader
          class="cascader"
          :clearable="true"
          filterable
          size="mini"
          :options="labelTreeData"
          :props="cascaderProps"
          v-model.trim="treeValue"
          change-on-select
        ></el-cascader>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
      <div
        slot="reference"
        class="labelContentBox"
        :style="{
          overflow: isAfold ? 'inherit' : 'hidden',
          height: isAfold ? 'auto' : '40px',
        }"
      >
        <span class="aFold fr" @click="afoldFun" v-if="labelArr.length > 0">
          <span
            class="V7_iconfont"
            :class="
              isAfold
                ? 'V7_iconV7tubiao_jiantoushang'
                : 'V7_iconV7tubiao_jiantouxia'
            "
          ></span>
        </span>
        <span
          v-if="labelArr.length > 0"
          class="addIcon"
          @click="visible = !visible"
        >
          <span class="V7_iconfont V7_iconV7tubiao_tianjiabiaoqian"></span>
        </span>
        <span class="labelContent" @click="visible = !visible" v-else>
          <span class="V7_iconfont V7_iconV7tubiao_tianjiabiaoqian"></span>
          <span class="addBtn">添加标签</span>
        </span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="item.name"
          placement="top"
          v-for="(item, index) in labelArr"
          :key="index"
        >
          <span
            class="labelContent"
            :style="{
              border: item.color ? 'none' : '1px solid #ecf0f3',
              background: item.color ? item.color : '#ffffff',
              color: item.color ? '#ffffff' : '#686e84',
            }"
          >
            {{ item.name }}
          </span>
        </el-tooltip>
      </div>
    </el-popover>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({
  name: 'addLabel'
})
export default class AddLabel extends Vue {
  [x: string]: any
  @Prop() private labelTreeData: any
  @Prop() private labelTreeObj: any
  @Prop() private labelArr: any
  @Prop({ default: false }) private customerLabelShow: any
  @Prop() private labelData: any

  private cascaderProps = {
    multiple: true,
    checkStrictly: true,
    lazy: true,
    lazyLoad: (node, resolve) => {
      setTimeout(() => {
        resolve()
      }, 30)
    },
    value: '_id',
    label: 'name',
    leaf: 'leaf'
  }

  private visible: boolean = false

  private isAfold: any = false

  private treeValue: any = ''

  private customerLabel: any = []

  private saveCustomerLabel () {
    this.$emit('addCutomerLabels', this.customerLabel)
    this.visible = false
  }

  private save () {
    if (this.treeValue && !this.treeValue.length) {
      return this.$message.error('请选择标签')
    }
    this.$emit('addLabelSave', this.treeValue)
    this.visible = false
    this.treeValue = []
  }

  private afoldFun () {
    this.isAfold = !this.isAfold
    this.$nextTick(() => {
      const dom: any = document.getElementsByClassName('labelContentBox')[0]
      const domHeight = dom.offsetHeight - 38
      this.$emit('afoldFun', { height: domHeight, isAfold: this.isAfold })
    })
  }

  public afoldHide () {
    this.isAfold = false
    this.$nextTick(() => {
      const dom: any = document.getElementsByClassName('labelContentBox')[0]
      let domHeight = 0
      if (dom) {
        domHeight = dom.offsetHeight - 38
      } else {
        domHeight = 0
      }
      this.$emit('afoldFun', { height: domHeight, isAfold: this.isAfold })
    })
  }

  public addLabelHide () {
    this.visible = false
  }

  public addSuccessFun () {
    this.$nextTick(() => {
      const dom: any = document.getElementsByClassName('labelContentBox')[0]
      const domHeight = dom.offsetHeight - 38
      this.$emit('afoldFun', { height: domHeight, isAfold: this.isAfold })
    })
  }

  private colorPopFun (e: any) { // 取消pop弹窗事件
    const ref: any = this.$refs.addLabel
    if (ref && !ref.$el.contains(e.target)) {
      this.visible = false
    }
  }

  private mounted () {
    document.addEventListener('click', this.colorPopFun)
  }

  private beforeDestroy () {
    document.removeEventListener('click', this.colorPopFun)
  }
}
</script>
<style scoped lang="stylus">
.addLabel
  min-height 40px
.cascader
  width 300px
  margin-right 8px
.addBtn
  margin-left 5px
  color #008bee
  cursor pointer
.labelContent
  cursor pointer
  padding 6px 11px
  margin 5px
  max-width 163px
  overflow hidden
  text-overflow ellipsis
  white-space nowrap
  border-radius 24px
  display inline-block
.V7_iconV7tubiao_tianjiabiaoqian
  color #008BEE
  font-size 12px
  vertical-align middle
.addIcon
  width 24px
  text-align center
  height 24px
  border 1px solid #E7E9ED
  border-radius 50%
  line-height 24px
  display inline-block
  vertical-align top
  margin 7px 0px 0px 5px
  cursor pointer
  .V7_iconV7tubiao_tianjiabiaoqian
    font-size 12px
    color #A6A6AE
.aFold
  width 16px
  height 16px
  border 1px solid #E7E9ED
  text-align center
  cursor pointer
  display inline-block
  border-radius 50%
  line-height 16px
  margin 10px 5px 0px 0px
  .V7_iconfont
    color #A6A6AE
</style>
